<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Devices</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='control_style.css') }}"/>
</head>
<body>
<div id="" class="left full-height">
    <!-- logo -->
    <div id="" class="logo-bar">
        <div id="" class="ele full-height">
            <h1 style="color: #ededed;">LOGO</h1>
        </div>

    </div>
    <!-- tabs -->
    <div id="" class="tab-bar">
        <div style="height: 50px;width: 100%"></div>
        <a href="/devices">
            <div id="" class="tab-content choix">
                DEVICES
            </div>
        </a>
        <a href="/types">
            <div id="" class="tab-content no-choix">
                TYPE
            </div>
        </a>
        <a href="/conn">
            <div id="" class="tab-content no-choix">
                CONNECTIONS
            </div>
        </a>
        <a href="/log">
            <div id="" class="tab-content no-choix">
                LOG
            </div>
        </a>
        <a href="/groups">
            <div id="" class="tab-content no-choix">
                GROUPS
            </div>
        </a>
    </div>
</div>

<div id="" class="right full-height">
    <!-- admin -->
    <div id="" class="admin-bar">

    </div>
    <!-- main content -->
    <div id="" class="content-background">
        <div class="content-box" >
        <div class="data-box" style="padding-left: 30px">
            <h2>ADD Device</h2>
            <p>name:<input type="text" id="add-device-name" style="width:200px"></p>
            <p>type:<select name="" id="add-device-type">
                 {% for t in td %}
                <option value="{{ td[t] }}">{{ td[t] }}</option>
                {% endfor %}
            </select></p>
        <p>address:<input type="text" id="add-device-addr" style="width:200px"></p>
        <button onclick="confirm_add_device()">submit</button>
        </div>

        </div>

    </div>
</div>
</body>
<script>
    var dict_t = {{ td2|tojson }};
    console.log(dict_t)
    function create_xhr() {
        let XHR = [  //兼容不同浏览器和版本得创建函数数组
            function () {
                return new XMLHttpRequest()
            },
            function () {
                return new ActiveXObject("Msxml2.XMLHTTP")
            },
            function () {
                return new ActiveXObject("Msxml3.XMLHTTP")
            },
            function () {
                return new ActiveXObject("Microsoft.XMLHTTP")
            }
        ];
        let xhr = null;
        //尝试调用函数，如果成功则返回XMLHttpRequest对象，否则继续尝试
        for (let i = 0; i < XHR.length; i++) {
            try {
                xhr = XHR[i]();
            } catch (e) {
                continue  //如果发生异常，则继续下一个函数调用
            }
            break;  //如果成功，则中止循环
        }
        return xhr;  //返回对象实例
    }

    function confirm_add_device() {
        let d_name = document.getElementById('add-device-name').value

        let d_type_block = document.getElementById('add-device-type')
        let d_type_num = d_type_block.selectedIndex
        let d_type = d_type_block.options[d_type_num].value

        let d_addr = document.getElementById('add-device-addr').value

        let command =
            {
                "name": d_name,
                "type_id": dict_t[d_type],
                "addr": d_addr
            }

        let xhr = create_xhr();
        xhr.open("POST", "/equipment/addEquipment", true)
        xhr.onreadystatechange = function () {  //绑定响应状态事件监听函数
            if (xhr.readyState == 4) {  //监听readyState状态
                if (xhr.status == 200 || xhr.status == 0) {  //监听HTTP状态码
                    let result = xhr.responseText //接收数据
                    console.log(result);
                    if (result == "success") {
                        {#location.reload();#}
                        window.location.href='/devices';
                    } else {
                        alert(result)
                    }

                }
            }
        }
        xhr.send(JSON.stringify(command))
    }
</script>
</html>